<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约拍平台 - 约拍详情</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .tag {
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 10px;
            background-color: #f0f0f0;
            color: #666;
            display: inline-block;
            margin-right: 4px;
        }
        .photographer-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid white;
        }
        .gallery-img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 8px;
        }
        .sticky-bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #eee;
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
        }
    </style>
</head>
<body>
    <!-- 状态栏将通过JS加载 -->
    
    <div class="pt-7 pb-24">
        <!-- 顶部导航 -->
        <div class="bg-white px-4 py-2 flex items-center sticky top-0 z-10 shadow-sm">
            <a href="home.html" class="text-gray-800 mr-4">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-lg font-bold flex-1 text-center">约拍详情</h1>
            <div class="flex space-x-4">
                <i class="far fa-heart text-gray-600"></i>
                <i class="fas fa-share-alt text-gray-600"></i>
            </div>
        </div>
        
        <!-- 约拍封面图 -->
        <div class="relative">
            <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-full h-64 object-cover">
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                <div class="text-white font-bold text-xl">日系小清新写真</div>
                <div class="flex items-center mt-1">
                    <div class="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full mr-2">热门</div>
                    <div class="text-white text-sm">上海 · 2km</div>
                </div>
            </div>
        </div>
        
        <!-- 价格和评分 -->
        <div class="bg-white p-4 flex justify-between items-center">
            <div>
                <span class="text-red-500 text-xl font-bold">¥399</span>
                <span class="text-gray-500 text-sm">起/次</span>
            </div>
            <div class="flex items-center">
                <div class="text-yellow-500 mr-1">
                    <i class="fas fa-star"></i>
                </div>
                <div class="text-sm font-bold">4.9</div>
                <div class="text-gray-500 text-sm ml-1">(128条评价)</div>
            </div>
        </div>
        
        <!-- 约拍标签 -->
        <div class="bg-white p-4 mt-2">
            <div class="flex flex-wrap">
                <div class="tag">日系风格</div>
                <div class="tag">小清新</div>
                <div class="tag">室内</div>
                <div class="tag">外景</div>
                <div class="tag">2小时</div>
                <div class="tag">20张精修</div>
            </div>
        </div>
        
        <!-- 摄影师信息 -->
        <div class="bg-white p-4 mt-2 flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="photographer-avatar mr-3">
                <div>
                    <div class="font-bold">张摄影</div>
                    <div class="text-xs text-gray-500">人像摄影师 · 3年经验</div>
                </div>
            </div>
            <button class="bg-blue-50 text-blue-500 px-3 py-1 rounded-full text-sm">关注</button>
        </div>
        
        <!-- 约拍详情 -->
        <div class="bg-white p-4 mt-2">
            <h2 class="font-bold text-lg mb-2">约拍详情</h2>
            <div class="text-sm text-gray-700 leading-relaxed">
                <p>【拍摄内容】日系小清新风格人像写真，适合喜欢清新自然风格的你。</p>
                <p class="mt-2">【拍摄时长】2小时，含1次服装更换</p>
                <p class="mt-2">【成片数量】20张精修照片，50张初选照片</p>
                <p class="mt-2">【拍摄场地】上海市静安区某网红咖啡厅 + 外景</p>
                <p class="mt-2">【服务包含】专业摄影师拍摄 + 引导摆姿 + 照片精修</p>
            </div>
        </div>
        
        <!-- 作品展示 -->
        <div class="bg-white p-4 mt-2">
            <h2 class="font-bold text-lg mb-2">作品展示</h2>
            <div class="grid grid-cols-3 gap-2">
                <img src="https://images.unsplash.com/photo-1513379733131-47fc74b45fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                <img src="https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                <img src="https://images.unsplash.com/photo-1534008897995-27a23e859048?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                <img src="https://images.unsplash.com/photo-1504276048855-f3d60e69632f?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-1.2.1&auto=format&fit=crop&w=662&q=80" class="gallery-img">
            </div>
        </div>
        
        <!-- 用户评价 -->
        <div class="bg-white p-4 mt-2">
            <div class="flex justify-between items-center mb-3">
                <h2 class="font-bold text-lg">用户评价</h2>
                <a href="#" class="text-blue-500 text-sm flex items-center">
                    查看全部
                    <i class="fas fa-chevron-right text-xs ml-1"></i>
                </a>
            </div>
            
            <!-- 评价1 -->
            <div class="mb-4 pb-4 border-b border-gray-100">
                <div class="flex items-center mb-2">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-8 h-8 rounded-full mr-2">
                    <div>
                        <div class="text-sm font-bold">李小姐</div>
                        <div class="flex text-yellow-500 text-xs">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                </div>
                <div class="text-sm text-gray-700">
                    摄影师很专业，拍出来的照片非常好看，很满意！摆姿也很到位，整个过程很轻松愉快。
                </div>
                <div class="flex mt-2 space-x-2">
                    <img src="https://images.unsplash.com/photo-1513379733131-47fc74b45fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-16 h-16 object-cover rounded">
                    <img src="https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-16 h-16 object-cover rounded">
                </div>
            </div>
            
            <!-- 评价2 -->
            <div>
                <div class="flex items-center mb-2">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-8 h-8 rounded-full mr-2">
                    <div>
                        <div class="text-sm font-bold">王先生</div>
                        <div class="flex text-yellow-500 text-xs">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                    </div>
                </div>
                <div class="text-sm text-gray-700">
                    拍摄体验很好，摄影师很耐心。就是后期修图时间有点长，等了一周才拿到成片。
                </div>
            </div>
        </div>
        
        <!-- 推荐约拍 -->
        <div class="bg-white p-4 mt-2">
            <h2 class="font-bold text-lg mb-3">相似推荐</h2>
            <div class="flex overflow-x-auto space-x-3 pb-2">
                <div class="flex-shrink-0 w-32">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" class="w-full h-40 object-cover rounded-lg">
                    <div class="mt-1">
                        <div class="text-xs font-bold">复古港风人像</div>
                        <div class="text-xs text-red-500">¥599起</div>
                    </div>
                </div>
                <div class="flex-shrink-0 w-32">
                    <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-full h-40 object-cover rounded-lg">
                    <div class="mt-1">
                        <div class="text-xs font-bold">街头时尚风格</div>
                        <div class="text-xs text-red-500">¥499起</div>
                    </div>
                </div>
                <div class="flex-shrink-0 w-32">
                    <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-full h-40 object-cover rounded-lg">
                    <div class="mt-1">
                        <div class="text-xs font-bold">夏日海边写真</div>
                        <div class="text-xs text-red-500">¥699起</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部固定栏 -->
    <div class="sticky-bottom">
        <div class="flex items-center">
            <button class="border border-gray-300 text-gray-600 rounded-full w-10 h-10 flex items-center justify-center mr-3">
                <i class="far fa-comment-dots"></i>
            </button>
            <div>
                <div class="text-xs text-gray-500">已有128人约拍</div>
                <div class="text-red-500 font-bold">¥399起/次</div>
            </div>
        </div>
        <button class="bg-blue-500 text-white px-6 py-2 rounded-full font-bold">立即预约</button>
    </div>
    
    <script>
        // 加载状态栏
        document.addEventListener('DOMContentLoaded', function() {
            // 创建iOS状态栏
            const statusBar = document.createElement('div');
            statusBar.className = 'bg-black text-white h-7 flex items-center justify-between px-4 text-xs fixed top-0 left-0 right-0 z-50';
            statusBar.innerHTML = `
                <div>
                    <span>9:41</span>
                </div>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            `;
            document.body.prepend(statusBar);
        });
    </script>
</body>
</html> 